<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" Content="text-html; charset=Windows-1252">
<title>To create an image map</title>
<style>@import url(coUA.css);</style>
<link disabled rel="stylesheet" href="htmlhelp.css">
</HEAD>

<BODY>
<h1>To create an image map</h1>
<ol>
<li>Use an image mapping program to create regions on an image that you want to annotate. These will be the areas that users click to open pop-up windows.</li>

<br>
<li>Insert your image in the HTML file using the following syntax:

<p><code>
&lt;img src=&quot;<i>file.gif</i>&quot; usemap=&quot;#<i>map name</i>&quot; BORDER=0 WIDTH=216 HEIGHT=216&gt;
</code></p>

<p>where <i>file.gif</i> is the name of your image file and <i>map name</i> is the name of the image map that you created in step 1, above. The <code>WIDTH</code> and <code>HEIGHT</code> attributes will vary depending on the size of your image.</p>
</li>
</ol>

<!--to resolve in next release: 
<font face="Arial" color="Red">Query:I think it's confusing and lengthy to have an example and a procedure listed separately in the same topic...I think it should be cut (is this something we NEED to doc -- they should get image mapping info from the image mapping app) or incorporated into the topic. So, for example, you would say, for the first step, "Use an image map program to make an image map such as the following: [code example]." Then the topic would be a "true" example with example values instead of placeholders.</font>-->

<h3>Example</h3>

<p>The following code shows an image map named <i>test</i> that has four regions:
<p><code>
<br>&lt;MAP NAME="test"&gt;
<br>&lt;AREA SHAPE=RECT COORDS="4,2,108,103"&gt;
<br>&lt;AREA SHAPE=RECT COORDS="117,6,212,104"&gt;
<br>&lt;AREA SHAPE=RECT COORDS="3,111,105,213"&gt;
<br>&lt;AREA SHAPE=RECT COORDS="114,113,211,210"&gt;
<br>&lt;/MAP&gt;
</code></p>

The following code inserts an image named test.gif and references the image map named test:

<p><code>
&lt;IMG SRC="test.gif" USEMAP="#test" BORDER=0 WIDTH=216 HEIGHT=216&gt;
</code></p>

<p>The resulting image has four "placeholder" regions that you will "hook-up" to pop-up windows in <a href="ocx_scripts_imagepopup6.htm">Step 5</a>:</p> 
<p>
<IMG SRC="test.gif" USEMAP="#test" BORDER=0 WIDTH=216 HEIGHT=216>
<MAP NAME="test">
<AREA SHAPE=RECT COORDS="4,2,108,103">
<AREA SHAPE=RECT COORDS="117,6,212,104">
<AREA SHAPE=RECT COORDS="3,111,105,213">
<AREA SHAPE=RECT COORDS="114,113,211,210">
</MAP>
</p>



<br>
<table border="0" cellpadding="0" cellspacing="4">
<tr> 
<td valign="top"><a href="ocx_scripts_imagepopup3.htm"><img src="step2.gif" alt="next step" border="0"></a>
</td><td><a href="ocx_scripts_imagepopup3.htm">Write text for pop-up windows</A>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>

</BODY>
</HTML>
